<template>
  <view class="bgColor">
    <view class="header">
      <text class="title">我的收藏</text>
    </view>

    <view class="favorites-wx">
      <view class="favorites-wx-top">
        <view class="favorites-wx-top-item" v-for="(v,i) in types" :key="i" @click="clickType(v)">{{v.label}}</view>
        <view class="favorites-wx-tips">点击预览，按住卡片向左滑动操作</view>
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item class="favorites-uni-swipe-action-item" v-for="(v,i) in list" :key="i">
          <view class="favorites-wx-item">

            <view class="favorites-wx-content favorites-wx-content-text" v-if="v.type==0">
              <view class="favorites-wx-text">
                {{ returnParse(v.content).content }}
              </view>
            </view>

            <view class="favorites-wx-content favorites-wx-content-img" v-if="v.type==1">
              <image :src="returnParse(v.content).thumbUrl" mode="aspectFill"></image>
            </view>

            <view class="favorites-wx-content favorites-wx-content-img" v-if="v.type==2">
              <view class="favorites-wx-text">
                {{ returnParse(v.content).name }}
              </view>
              <view class="tool-icon iconfont icon-file"></view>

            </view>

            <view  class="favorites-wx-content favorites-wx-content-voice" v-if="v.type==3">
              <view class="favorites-wx-content-voice-box">
                <view class="favorites-wx-text" >
                  <text>{{ returnParse(v.content).duration }}''</text>
                </view>
                <view @click="playVOICE(returnParse(v.content).url)" class="tool-icon iconfont icon-voice-play"></view>
              </view>
            </view>

            <view class="favorites-wx-content favorites-wx-content-img" v-if="v.type==4">
              <view class="favorites-wx-content-video-img" @click="openVideo(returnParse(v.content).url)">
                <view class="favorites-wx-text">
                  {{ returnParse(v.content).name }}
                </view>
                <view class="tool-icon iconfont icon-chat-video"></view>
              </view>
            </view>

            <view class="favorites-wx-bottom">
              <text>{{ v.senderName }}</text>
              <text style="margin-left: auto">{{ v.createTimeStr }}</text>
            </view>
          </view>
          <template v-slot:right>
            <view class="favorites-wx-action-item">
              <view class="favorites-wx-action-item-btn favorites-wx-delete" @click="favoritesDeleta(v,i)">删除</view>
              <view v-if="type=='2'" class="favorites-wx-action-item-btn favorites-wx-view" @click="clickitem(v,i)">发送</view>
            </view>
          </template>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <uni-load-more v-show="list.length > 0" :status="queryParams.status"></uni-load-more>

    </view>
  </view>
</template>

<script>
import UniSwipeActionItem from "@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue";
import UniSwipeAction from "@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue";

export default {
  components: {UniSwipeAction, UniSwipeActionItem},
  emits:['clickitem'],
  data() {
    return {
      queryParams: {
        hasNextPage:true,
        refreshing: false,
        status: 'more',
        pageNum: 1,
        pageSize: 10
      },
      list:[],
      innerAudioContext:'',
      paused:false,
      types:[{
        label:'全部',
        value:''
      },{
        label:'文字',
        value:'0'
      },{
        label:'图片',
        value:'1'
      },{
        label:'视频',
        value:'4'
      },{
        label:'语音',
        value:'3'
      },{
        label:'文件',
        value:'2'
      }]
    };
  },
  props:{
    type:{
      type:String,
      default:'1'//1列表 2聊天窗口
    }
  },
  onLoad() {
    this.queryParams.refreshing=true
    this.getMyStar('')
  },
  methods: {
    clickitem(e,i){
      this.$emit('clickitem',e,i)
    },
    favoritesDeleta(v,i){
      uni.showModal({
        title: '警告',
        content: '是否确认删除收藏',
        success: (res)=> {
            if (res.confirm) {
              this.$http({
                url: '/user/my-star/'+v.id,
                method: 'DELETE',
              }).then(res => {
                this.list.splice(i, 1);
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                  position: 'bottom'
                })
              });
            } else if (res.cancel) {

            }
        }
      });
    },
    returnParse(txt) {
      return JSON.parse(txt);
    },

    loadMore() {
      if (!this.queryParams.hasNextPage) {
        return
      }
      this.queryParams.pageNum++
      this.queryParams.status = 'loading'
      this.getMyStar()
    },

    getMyStar(type) {
      this.queryParams.type = type
      this.$http({
        url: `/user/my-star`,
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.list = res.list;
        this.queryParams.hasNextPage = res.hasNextPage
        if (!res.hasNextPage){
          this.queryParams.status = 'noMore'
        }
      })
    },
    playVOICE(url){
      if(this.paused){
        this.innerAudioContext.destroy()
        this.paused=!this.paused
        return
      }
      this.innerAudioContext = uni.createInnerAudioContext();
      // var url='https://www.w3school.com.cn/i/horse.ogg'
      this.innerAudioContext.sessionCategory='soloAmbient'
      this.innerAudioContext.src = url;
      this.innerAudioContext.play()

      this.innerAudioContext.onPlay(() => {
        // console.log('播放')
        this.paused=true
      })
      this.innerAudioContext.onPause(() => {
        // console.log('暂停')
        this.paused=false
        this.innerAudioContext.destroy()
      })
    },
    openVideo(url){
      this.$fc.plusDownload({onlinePath:url}).then(res=>{
        this.$fc.plusOpenFile({filePath:res})
      })
    },
    clickType(e){
      console.log(e)
      this.queryParams.refreshing=true
      this.getMyStar(e.value)
    }
  },
  onPullDownRefresh() {
    console.log('onPullDownRefresh')
    this.queryParams.refreshing=true
    this.getMyStar('');
  },
  onReachBottom() {
    console.log('bottom')
    this.loadMore()
  },
  onNavigationBarButtonTap(e) {
    switch (e.index) {
      case 0:
        uni.showToast({
          title:'添加',
          icon:'none'
        })
        break;
      default:
        break;
    }
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  padding: 5px;
  background-color: #f8f8f8;
  line-height: 50px;
  font-size: 30rpx;
  letter-spacing: 2rpx; /* 字母间距 */
  font-weight: 600;
  border: #dddddd solid 1px;

  .btn-side {
    position: absolute;
    line-height: 60rpx;
    font-size: 28rpx;
    cursor: pointer;

    &.right {
      right: 30rpx;
    }
  }
}

.tool-icon {
  border-radius: 20%;
  background-color: white;
  color: black;
}
.iconfont {
  font-size: 40rpx;
  margin: 6rpx;
}
.bgColor{
  background: #f8f8f8;
}
.favorites-wx{
  display: flex;
  flex-direction: column;
}
.favorites-wx-item{
  flex: 1;
  display: flex;flex-direction: column;
  margin:0 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 38rpx;
}
.favorites-wx-content{
  display: flex;flex-direction: row;
}
.favorites-wx-bottom{
  display: flex;flex-direction: row;align-items: center;
  margin-top: 12rpx;
}
.favorites-wx-bottom text{
  margin-right: 24rpx;
  font-size: 24rpx;
  color: #999;
}
.favorites-wx-top{
  margin: 24rpx;
  padding: 24rpx;
  display: flex;flex-direction: row;flex-wrap: wrap;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}
.favorites-wx-top-item{
  color: #5F698C;
  width: 33.333%;
  box-sizing: border-box;
  padding: 0 24rpx;
  margin: 24rpx 0;
  text-align: center;
  overflow: hidden;
}
.favorites-wx-top-item:nth-child(3n-1){
  border-left: 1px #ddd solid;
  border-right: 1px #ddd solid;
}
.favorites-wx-content-text{}
.favorites-wx-text{
  color: #333;
  font-size: 30rpx;
}
.favorites-wx-content-img image{
  width: 160rpx;
  height: 160rpx;
}


.favorites-wx-content-video{

}
.favorites-wx-content-video-img,.favorites-wx-content-video-img image{
  width: 160rpx;
  height: 160rpx;
  position: relative;
}
.favorites-wx-content-video-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;flex-direction: row;justify-content: center;align-items: center;
}
.favorites-wx-content-video-icon text{
  font-size: 64rpx;
  color: #dddddd;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.favorites-wx-content-location{
}
.favorites-wx-content-location-box {
  border: 1px #f6f6f6 solid;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12rpx;
  padding: 24rpx;
}
.favorites-wx-content-location-box-name {
  font-size: 28rpx;
  color: #101010;
  font-weight: bold;
}
.favorites-wx-content-location-box-address {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
}
.favorites-wx-content-location-box-map {
  background-color: #e5ffff;
  overflow: hidden;
  width: 100%;
  height: 150rpx;
}
.favorites-wx-content-voice-box{
  display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
}
.favorites-wx-content-voice{}
.favorites-wx-content-voice-vmove{
  animation: scalevVoice 1s linear infinite;
  transform: scale(1);
}
@keyframes scalevVoice {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.favorites-wx-content-voice-tras{
  display: flex;flex-direction: row;align-items: center;
}
.favorites-wx-content-voice-tras text{
  padding:6rpx 12rpx;
  font-size: 24rpx;
  background-color: #eee;
  border-radius: 12rpx;
  color: #bcbcbc;
  margin:0 12rpx;
}
.favorites-wx-content-voice-content{
  padding:12rpx 24rpx;
  border-radius: 12rpx;
  background-color: #4cd964;
  display: flex;flex-direction: row;align-items: center;
}
.favorites-wx-content-voice-text{
  width: 100%;
  font-size: 26rpx;
  color: #666;
  word-break: break-all;
}
.favorites-wx-content-card{
  width: 100%;
  box-sizing: border-box;
  border: 1px #f6f6f6 solid;
  padding: 24rpx;
  border-radius: 12rpx;
}
.favorites-wx-content-card-top{
  display: flex;flex-direction: row;align-items: center;
}
.favorites-wx-content-card-top-img{
  width: 80rpx;
  min-width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
  border-radius: 6rpx;
}
.favorites-wx-content-card-top-content{
  overflow: hidden;
  display: flex;flex-direction: column;
}
.favorites-wx-content-card-title{
  color: #070707;
  font-size: 32rpx;
}
.favorites-wx-content-card-no{
  font-size: 24rpx;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favorites-wx-content-card-card{
  font-size: 24rpx;
  color: #666;
  margin-top: 24rpx;
}
.favorites-wx-view{
  background-color: #00aaff;
}
.favorites-wx-delete{
  background-color: #F55C23;
}
.favorites-wx-action-item-btn{
  border-radius: 20rpx;
  color: #fff;
  padding:0 40rpx;
  flex: 1;
  display: flex;flex-direction: row;justify-content: center;align-items: center;
}
.favorites-wx-action-item{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.favorites-uni-swipe-action-item{
  margin-bottom: 24rpx;
}
.favorites-uni-swipe-action-item:nth-last-child(1){
  margin-bottom: 0;
}
.favorites-wx-tips{
  width: 100%;
  color: #999;
  font-size: 24rpx;
  text-align: center;
}
</style>
